iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

追求JS小姊姊30天系列 第 18

追求JS小姊姊系列 Day18 -- 方函式的能力展現:第三型態 Constructor function 登場

  • 分享至 

  • xImage
  •  

前情提要

不論如何,似乎都有人能幫忙方函式收東西

方函式:好像還沒提到我的第三型態 -- 建構式
:.... 還有啊,不愧是頭等工具人嗎?

(話還沒說完,他就從口袋拿出手機)
方函式:這樣解釋能力可能最直接了,建構式模式!(手發光)

function MakePhone(size,battery){
    this.size = size;
    this.battery = battery;
}
let copiedPhone1 = new MakePhone(20,20000);
let copiedPhone2 = new MakePhone(20,20000);
let copiedPhone3 = new MakePhone(20,20000);

(方函式手上出現好幾台一樣的手機)

方函式:只要知道東西的資訊(如型號),透過這個模式,我能大量複製相同的東西

console.log(copiedPhone1);
console.log(copiedPhone2);
console.log(copiedPhone3);

究竟是怎麼做到的?


建構式的功能

在物件導向程式設計裡,用來創造物件的工具通常被稱為 constructor,透過建構式可以大量複製相似內容的物件(被稱為instance)。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let person1 = new Person("Wendy", 18);
let person2 = new Person("Andy",18);
console.log(x);

但有幾件事要注意:

1. 建構式建立的物件不使用語彙範疇

它所建立的函式並不使用語彙環境(lexical scoping),而是作為**頂層函式(top-level-function)**存在,什麼意思?

let scope = "global";
function Constructor(){
    let scope = "local";
    return new Function a("return scope");
}
console.log(Constructor()()); // => global

這個建立的函式會被建立在全域,所以它讀取不到建構式內的變數scope,而是會讀到全域的scope

2. 那少了new會怎樣呢?

let person3 = Person("Belinda",18);
console.log(x);//get undefined

剛剛可以的,現在怎都不行了?
原因這樣是無法判斷你的動作,是要執行這個程式,或是要根據建構式function去建立新的object
那重點根本都在new麻所以new做了什麼?


new 到底做了什麼?

使用new這個關鍵字執行Person()時,會按順序發生以下的事情:

  1. 先有一個空物件被建立。
  2. 執行建構函式Person
  3. Person裡的 this 指向new出的空物件。
  4. 因為已經指向好,所以參數傳入的屬性和方法,就會被放進這個空物件。

透過console.log()再重看一次上面的程式碼:

function Person(name, age) {
  this.name = name;
  console.log(this);//取得name這個properties
  this.age = age;
  console.log(this);//取得age這個properties
}
let x = new Person("rex", "18");
console.log(x);

小結:

  1. 建構式建議以大寫命名(方便與一般函式做區隔)
  2. 一般建構式內會避免return,原因如下:
function Person(name, age) {
  this.name = name;
  this.age = age;
  return 1;
}
let x = new Person("rex", "18");
console.log(x);

回傳基本型別,不會影響this的內容,但若是物件型別的話...

function Person(name, age) {
  this.name = name;
  this.age = age;
  return [];
}

就會得到回傳的物件型別內容

let x = new Person("rex", "18");
console.log(x);//get []

-- to be continued --


那今天就到這邊摟!今天分享喜歡的歌是:
無妄合作社 No-nonsense Collective〈青春之歌 The Grand Tour〉Official Music Video
https://www.youtube.com/watch?v=qRCnF7SMufo

每天的休息,是為了後面的追求,明天見。


reference:

008
JavaScript大全
D13 - 做出雞蛋糕 new + Constructor
[筆記] 談談 JavaScript 中內建的 function constructors 及應注意的地方
建構物件範本:Constructor Function


上一篇
追求JS小姊姊系列 Day17 -- 方函式的能力展現:有小弟真好:函式隱含參數 arguments
下一篇
追求JS小姊姊系列 Day19 -- 工具力,原來如此:原型與原型鍊。
系列文
追求JS小姊姊30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言